<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="icon" href="img/z.png">
	<link rel="stylesheet" href="css/Wayne.css">
	<link rel="stylesheet" href="https://at.alicdn.com/t/font_1468920013_492283.css">
	<link rel="stylesheet" href="css/skill.css">
	<script>
		var pageWidth = document.documentElement.clientWidth;
		var content = 'html{font-size:'+pageWidth/64+'px};'
		var style = document.createElement('style')
		style.innerHTML = content
		document.head.appendChild(style)
	</script>
	<title>wayne's resume</title>
</head>
<body>

	<div class="page-wrapper clear-fix">
		<aside>
			<div class="headimg">
				<img src="http://p1.bpimg.com/4851/04da4024e30e9388.jpg" alt="头像">
			</div>
			<a href="" class="myname">罗伟恩</a>
			<div class="menu">
				<div class="menubox">
					<div class="menuinner"></div>
				</div>
			</div>
			<footer>
				<ul class="nav">
					<li><a href="index.html">首页</a></li>
					<li><a href="work.html">作品</a></li>
					<li><a href="skill.html" class="selected">技能</a></li>
					<li><a href="contact.html">联系</a></li>
					<li><a href="http://wayneblog.cn/" target="new">个人博客</a></li>
				</ul>
				<div id="footer">
					<div class="logo">
						<a href="" target="_blank" class="r-youxiang r-icon"></a>
						<a href="" target="_blank" class="r-shu r-icon"></a>
						<a href="" target="_blank" class="r-github r-icon"></a>
						<a href="" target="_blank" class="r-weibo r-icon"></a>
					</div>
					<p class="source">
					Open source:<a href="" target="_blank">GitHub</a>
					<br>
					<span class="right">© copyright Wayne,2017</span>
					</p>
				</div>
			</footer>
		</aside>
		<div class="main">
			<p class="myskill">我的技能</p>
			<div class="echart-wrapper"><div id="echart"></div></div>
			<div class="skill">
				<ul class="skilldetail">
					<h4>做重构，页面工整，像素级还原</h4>
					<li>熟练使用PhotoShop切图，像素级重构，准确的还原设计</li>
					<li>高性能的页面文档流，规范、工整，能够提炼可复用的模块，注释清晰</li>
					<li>熟练掌握HTML标签，能写出语义合理，兼容性良好的页面文档结构</li>
					<li>熟练掌握IE的盒模型和W3C盒模型的区别和使用场景</li>
					<li>熟悉ECMA5的标签规范以及HTML5新标签及CSS3样式及动画</li>
				</ul>
				<ul class="skilldetail2">
					<h4>写脚本，逻辑清晰，代码精简</h4>
					<li>熟练使用jQuery库</li>
					<li>熟练使用原生javascript写组件，也会用jquery写插件</li>
					<li>熟悉WEB开发中HTTP协议，以及Ajax通过JSON与后台数据接口进行数据交互</li>
					<li>熟悉vue.js，正开发个人简历生成工具</li>
					<li>注重代码简洁性，可重用性，提升开发效率</li>
				</ul>
			</div>

		</div>
	</div>
	<script src="https://oapy20uns.qnssl.com/jquery-1.12.4.min.js"></script>
	<script src="https://oapy20uns.qnssl.com/echarts.min.js"></script>
	<script>
		$('.menu').on('click',function(){
			$('aside').toggleClass('active')
		})
		var myChart = echarts.init(document.getElementById('echart'));
		var option = {
		    title: {
		        text: ''
		    },
		    tooltip: {},
		    legend: {
		        data: ['能力', '兴趣']
		    },
		    radar: {
		        // shape: 'circle',
		        indicator: [
		           { name: 'HTML&HTML5', max: 100},
		           { name: 'CSS&CSS3', max: 100},
		           { name: 'JS', max: 100},
		           { name: 'jQuery', max: 100},
		           { name: 'LESS&SASS', max: 100},
		           { name: 'Bootstrap', max: 100},
		           { name: 'Gulp',max:100},
		           { name: 'Vue.js', max:100}
		           
		        ]
		    },
		    series: [{
		        name: '能力 vs 兴趣（skill vs interesting）',
		        type: 'radar',
		        // areaStyle: {normal: {}},
		        data : [
		            {
		                value : [90, 80, 70, 75, 60, 70, 70, 70],
		                name : '能力'
		            },
		            {
		                value : [80, 100, 80, 85, 60, 75, 80, 100],
		                name : '兴趣'
		            }
		        ]
		    }]
		};
		myChart.setOption(option);
	</script>
</body>
</html>